<template>
	<view>
		<custom-header title="账单详情" />
		<view class="_wrap">
			<view class="content_wrap">
				<view class="status_icon">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/detail_ing_icon.png" mode="" v-if="detail.status == 1"></image>
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/detail_freeze_icon.png" mode="" v-if="detail.status == 2"></image>
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/detail_success_icon.png" mode="" v-if="detail.status == 3"></image>
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/detail_fail_icon.png" mode="" v-if="detail.status == 4"></image>
				</view>
				<view class="title">
					<text v-if="detail.status == 1">提现中</text>
					<text v-if="detail.status == 2">冻结中</text>
					<text v-if="detail.status == 3">提现成功</text>
					<text v-if="detail.status == 4">提现失败</text>
				</view>
				<view class="price">
					-{{ detail.price }}
				</view>
				<view class="other_info">
					<view class="oi">
						<view class="lable">交易类型</view>
						<view class="value">转账</view>
					</view>
					<view class="oi">
						<view class="lable">交易时间</view>
						<view class="value">2025-03-22  12:09:33</view>
					</view>
					<view class="oi">
						<view class="lable">交易账户</view>
						<view class="value">聚合账户</view>
					</view>
					<view class="oi">
						<view class="lable">交易单号</view>
						<view class="value">401881394705842176T</view>
					</view>
					<view class="oi">
						<view class="lable">备注</view>
						<view class="value">这里写冻结原因</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const detail = ref({})
	
	onLoad((option)=>{
		console.log(option)
		detail.value = option
	})
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
		.content_wrap{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 60rpx 30rpx 60rpx;
		}
		.status_icon{
			width: 128rpx;
			height: 128rpx;
			margin: 0 auto;
		}
		.title{
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			padding-top: 20rpx;
			font-weight: bold;
		}
		.price{
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
			color: #333333;
			padding: 40rpx 0 80rpx;
		}
		.other_info{
			border-top: 1rpx solid #EFF0F8;
			padding-top: 10rpx;
			.oi{
				display: flex;
				padding-top: 20rpx;
				font-size: 28rpx;
				.lable{
					color: #999999;
					width: 160rpx;
				}
				.value{
					color: #666666;
				}
			}
		}
	}
</style>
